<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../css/bootstrap-tagsinput2.css">
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <link rel="stylesheet" href="../../css/page.css">
    <style>

        #kw {
            height: 100px;
        }

    </style>

</head>
<body>
<!--<div class="wrapper">
    <div class="data-grid">
        <div class="form-breadcrumb">
            <span>关键词维护</span>
        </div>
        <div class="form-field-box">
            <div class="form-inline">
                <div class="input-inline">
                    <input id="name" placeholder="请输入关键字" type="text"
                           class="form-input" maxlength="50" onkeyup="this.value=this.value.replace(/[, ]/g,'')">
                </div>
            </div>
            <div class="form-inline">
                <a title="搜索关键词" class="form-btn form-btn-danger" onclick="queryLabel()"
                   href="javascript:void(0)">搜索关键词</a>
            </div>
        </div>
    </div>
</div>-->
<div class="data-grid">
    <div class="form-field-box form-ui-item" style="width: 600px;">
        <div class="form-item">
            <label class="form-ui-label form-ui-label-w">标准问题</label>
            <div class="form-input-block">
                <input type="text" id="questionName" readonly="readonly"
                       class="form-input form-input-5">
            </div>
        </div>
        <div class="form-item">
            <label class="form-ui-label form-ui-label-w form-ui-label-kuozhan">扩展问</label>
            <div class="form-input-block select2-wrapper-box">
                <div class="form-input form-input-5" style="height:auto">
                    <input type="text" id="kw" class="form-input form-input-5">
                </div>
            </div>
        </div>
    </div>
</div>
<ul id="ul_1">

</ul>
<button id="get_all_date">获取全部数据</button>
<button id="readonly_enable">使只读</button>
</body>
<script src="../../js/jquery-3.4.1.js"></script>
<script src="../../js/bootstrap/bootstrap.min.js"></script>
<script src="../../js/bootstrap-tagsinput2.js"></script>
<script>

    let ul1 = $('#ul_1');

    let arr = ['s1', 's2', 's3', 's4', '美国', '日本'];
    let getAllDataButton = $('#get_all_date');
    let readonlyEnableButton = $('#readonly_enable');

    $(() => {
        $("#kw").tagsinput();
        addItem();
        removeListen();
        addListen();
        getAllDataButtonInit();
        readonlyButtonInit();
    });

    function addItem() {
        $('#kw').tagsinput('removeAll');
        $('#keywordsAdd').hide();
        $.each(arr, function (index, value) {
            $('#kw').tagsinput("add", value);
            ul1.append(`<li value="${value}">${value}</li>`);
        });
    }

    function removeListen() {
        $('#kw').on("itemRemoved", function (event) {
            console.log('删除的元素为: ', event.item);
            $(`#ul_1 li[value='${event.item}']`).remove();
        });
    }

    function addListen() {
        $('#kw').on("itemAdded", function (event) {
            console.log('添加的元素为: ', event.item);
        });
    }

    function getAllDataButtonInit() {
        getAllDataButton.on('click', function () {
            console.log('全部数据为:', $('#kw').val());
        });
    }

    function readonlyButtonInit() {
        readonlyEnableButton.on("click", function () {
            $("#kw").prop("disabled", true);
        });
    }

</script>
</html>